import {useLocalObservable, Observer} from "mobx-react";
import {useEffect} from "react";

export default function MobXdemo() {
    const todo = useLocalObservable(() => ({
        title: "Test",
        done: true,
        toggle() {
            this.done = !this.done
        }
    }));

    useEffect(() => {
        setTimeout(() => {
            todo.title = '1000';
        }, 3000);
    }, []);

    const Child = (props: any) => {
        return <div>{props.title}</div>
    }

    return (
        <Observer>
            {() => (
                <h1 onClick={todo.toggle}>
                    {todo.title} {todo.done ? "[DONE]" : "[TODO]"}
                    <Child title={todo.title}/>
                </h1>
            )}
        </Observer>
    )
}